import Taro, {Component, Config} from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import './index.scss'
import { formatAmount } from '@/utils/utils'
import { getUserInfo } from '@/api/userApi'
import { getPage } from '@/api/productApi'
import { getAppConfig } from '@/utils/storage'
import {Loading, GoodsOneList, CustomNavOne, CustomPuzzleOne, GoodsFiveList} from '@/components/index'
import { toWalletRechargePage } from '@/utils/page_router'
import { OSS, USER_RECHARGE, USER_WALLET_MENU, USER_WALLET_PUZZLE } from "@/config/config"

export default class Index extends Component {
  state: any
  config: Config = {
    backgroundTextStyle: "dark",
    enablePullDownRefresh: true,
    navigationBarTitleText: '我的账户'
  }

  constructor() {
    super(...arguments)
    this.state = {
      loading: true,
      adList: getAppConfig(USER_WALLET_PUZZLE),
      navList: getAppConfig(USER_WALLET_MENU),
      userInfo: {},
      goodsList: [],
      isRecharge: getAppConfig(USER_RECHARGE) == 1,
    }
  }

  async componentWillMount() {
    await this.getGoodsPage()
    await this.getWalletInfo()
  }

  //  下拉刷新
  onPullDownRefresh() {
    this.getWalletInfo()
  }

  //  获取热门推荐商品
  getGoodsPage() {
    getPage({ page: 1, limit: 4 }).then(res => {
      const { list } = res.data
      this.setState({
        goodsList: list
      })
    })
  }

  //  获取钱包信息
  getWalletInfo() {
    getUserInfo().then(res => {
      this.setState({
        loading: false,
        userInfo: res.data
      })
    })
    setTimeout(() => {
      Taro.stopPullDownRefresh()
    }, 2000)
  }

  render() {
    const { loading, adList, navList, userInfo, goodsList, isRecharge } = this.state
    return (<View className='wallet-page'>
      {loading && <Loading/>}
      <View className='wallet-scroll'>
        <View className='wallet-header thin-border__b'>
          <View className='wallet-box'>
            <Image src={`${OSS}/system/image/wallet_bg.png`} className='wallet-bg'/>
            <View className='statistics-box d-f f-d-c j-c-b'>
              <View className='total-box'>
                <View className='accumulate-box'>
                  <View className='accumulate-text'>累计余额（元）</View>
                  <View className='accumulate-num bnn-number total-num'>{formatAmount(userInfo.amount)}</View>
                </View>
                {isRecharge && <View className='recharge-btn f-g-5' hoverClass='hover-class--btn' onClick={() => toWalletRechargePage()}>充值</View>}
              </View>
              <View className='accumulate-list d-f'>
                <View className='accumulate-box'>
                  <View className='accumulate-text'>累计充值（元）</View>
                  <View className='accumulate-num bnn-number'>{formatAmount(userInfo.chargeAmount)}</View>
                </View>
                <View className='accumulate-box'>
                  <View className='accumulate-text'>累计消费（元）</View>
                  <View className='accumulate-num bnn-number'>{formatAmount(userInfo.costAmount)}</View>
                </View>
              </View>
            </View>
          </View>
          <CustomNavOne list={navList} className='nav-list thin-border__b'/>
          <CustomPuzzleOne list={adList} className='img-list'/>
        </View>
        <View className='wallet-body hot-goods'>
          <View className='hot-title f-g-5'>
            <View className='title-left'/>
            <View className='title-text'>热门推荐</View>
            <View className='title-right'/>
          </View>
          {/*<GoodsFiveList list={goodsList}/>*/}
          {goodsList.length && <GoodsFiveList list={goodsList}/>}
        </View>
      </View>
    </View>)
  }
}
